<template>
  <a-card :bordered="false">
    <a-card :bordered="false" size="small">
      <a-breadcrumb>
        <a-breadcrumb-item><router-link to="/evaluateList">评价管理</router-link></a-breadcrumb-item>
        <a-breadcrumb-item>评价详情</a-breadcrumb-item>
      </a-breadcrumb>
    </a-card>
    <a-card>
      <a-tabs v-model="activeKey">
        <a-tab-pane :key="1" tab="基础信息">
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">标题:</div>
            <div class="meizong_detail_val">{{detail.intro}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">内容:</div>
            <div class="meizong_detail_val">
              <template v-for="(item,index) in detail.content">
                <div :key="index">{{item}}</div>
              </template>
            </div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">评价图片:</div>
            <div class="meizong_detail_val">
              <ant-img :antImgesUl="detail.imgs"/>
              <!-- <template v-for="(item,index) in detail.imgs">
                <ant-img :antImges="item" :key="index" />
              </template> -->
            </div>
          </div>
          <div class="meizong_detail_row" v-if="detail.video">
            <div class="meizong_detail_title">评价视频:</div>
            <div class="meizong_detail_val">
              <div class='demo'>
                <VideoModal :videoUrl="detail.video"></VideoModal>
              </div>
            </div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">用户名:</div>
            <div class="meizong_detail_val">{{detail.memberName}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">用户手机:</div>
            <div class="meizong_detail_val">{{detail.memberMobile}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">商家名称:</div>
            <div class="meizong_detail_val">{{detail.merchantName}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">技师名称:</div>
            <div class="meizong_detail_val">{{detail.techName}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">隐藏状态:</div>
            <div class="meizong_detail_val">
              <span class="meizong_detail_span">{{detail.hide | hide}}</span>
              <a-button type="primary" @click="funEditHide" icon="edit" size="small">修改隐藏</a-button>
            </div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">浏览量:</div>
            <div class="meizong_detail_val">{{detail.browse}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">点赞数:</div>
            <div class="meizong_detail_val">{{detail.star}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">评论数:</div>
            <div class="meizong_detail_val">{{detail.comment}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">评分:</div>
            <div class="meizong_detail_val">
              <a-rate v-model="detail.score" disabled allowHalf/>
            </div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">效果分:</div>
            <div class="meizong_detail_val">
              <a-rate v-model="detail.effect" disabled allowHalf/>
            </div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">环境分:</div>
            <div class="meizong_detail_val">
              <a-rate v-model="detail.env" disabled allowHalf/>
            </div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">服务分:</div>
            <div class="meizong_detail_val">
              <a-rate v-model="detail.service" disabled allowHalf/>
            </div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">专业分:</div>
            <div class="meizong_detail_val">
              <a-rate v-model="detail.major" disabled allowHalf/>
            </div>
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-card>
    <!-- 表单区域 -->
    <evaluateHideModal ref="evaluateForm" @closeModal="closeModal"></evaluateHideModal>
  </a-card>
</template>

<script>
// import moment from 'moment'
import AntImg from '@/views/components/meizong/antImg'
import ApiTree from "@/api/common/evaluateList";
import VideoModal from '@/views/components/meizong/videoModal';
import evaluateHideModal from '@/views/common/modules/evaluateHideModal';
import { Slime, crud } from "@/mixins/slime";

export default {
  name: "evaluateDetail",
  mixins: [Slime],
  components: {
    AntImg,
    VideoModal,
    evaluateHideModal
  },
  data() {
    return {
      activeKey: 1,
      detailId: null,
      detail:{},
    };
  },
  created() {
    let id = this.$route.query.id
    this.detailId = id
    this.loadData();
  },
  methods: {
    // 加载表格数据
    loadData() {
      let that = this
      let id = this.detailId
      ApiTree.getDetail(id).then((res)=>{
        let data = res.result
        that.detail = {
          ...data,
          content: data.content ? data.content.split("\n") : [],
          imgs: that.antImageArr(data.imgs),
          score: data.score/10,
          effect: data.effect/10,
          env: data.env/10,
          service: data.service/10,
          major: data.major/10,
        }
      })
    },
    funEditHide(){
      let evaluateId = this.detailId
      let hide = this.detail.hide == 1 ? 0 : 1
      this.$refs.evaluateForm.open(evaluateId, hide);
    },
  },
  filters: {
    status: function (status) {
      switch (status) {
        case 0:
          return "待审核";
        case 10:
          return "审核通过";
        case 20:
          return "审核失败";
        default:
          return "未知";
      }
    },
    hide: function (hide) {
      switch (hide) {
        case 1:
          return "隐藏";
        case 0:
          return "显示";
        default:
          return "未知";
      }
    },
  },
};
</script>
<style scoped>
.meizong_detail_val{
  width: 80%;
}
.demo {
  display: inline-block;
  width: 500px;
  text-align: center;
  line-height: 100px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}
</style>